<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('新增招聘信息')"/>
    <th:block th:include="include :: datetimepicker-css"/>
    <th:block th:include="include :: select2-css"/>
    <th:block th:include="include :: bootstrap-select-css"/>
</head>
<style>
    input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
        -webkit-appearance: none;
    }

    input[type="number"] {
        -moz-appearance: textfield;
    }

</style>
<body>
<div class="wrapper wrapper-content animated fadeInRight ibox-content" id="dv">
    <form class="form-horizontal m" id="form-recruitment-add" AUTOCOMPLETE="OFF">
        <h4 class="form-header h4">基本信息</h4>
        <div class="form-group">
            <div class="col-sm-12">
                <div class="col-sm-6">
                    <label class="col-sm-4 control-label">单位：</label>
                    <div class="col-sm-8">
                        <select name="compId" id="compId" class="form-control noselect2">
                            <option value="">请选择</option>
                            <option th:each="pro:${userComp}" th:value="${pro.compId}"
                                    th:text="${pro.compName}"></option>
                        </select>
                    </div>

                </div>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-12">
                <div class="col-sm-6">
                    <label class="col-sm-4 control-label">年份：</label>
                    <div class="col-sm-8">
                        <select name="years" id="years" class="form-control noselect2">
                            <option value="">请选择</option>
                            <option value="2020">2020</option>
                            <option value="2021">2021</option>
                            <option value="2022">2022</option>
                            <option value="2023">2023</option>
                            <option value="2024">2024</option>
                            <option value="2025">2025</option>
                        </select>
                    </div>
                </div>
                <div class="col-sm-6">
                    <label class="col-sm-4 control-label">月份：</label>
                    <div class="col-sm-8">
                        <select name="months" id="months" class="form-control noselect2">
                            <option value="">请选择</option>
                            <option value="1">一月</option>
                            <option value="2">二月</option>
                            <option value="3">三月</option>
                            <option value="4">四月</option>
                            <option value="5">五月</option>
                            <option value="6">六月</option>
                            <option value="7">七月</option>
                            <option value="8">八月</option>
                            <option value="9">九月</option>
                            <option value="10">十月</option>
                            <option value="11">十一月</option>
                            <option value="12">十二月</option>
                        </select>
                    </div>
                </div>
            </div>
        </div>

        <div class="form-group">
            <div class="col-sm-12">
                <div class="col-sm-6">
                    <label class="col-sm-4 control-label">需求人数：</label>
                    <div class="col-sm-8">
                        <input id="demandNum" name="demandNum" onblur="getRecruitReach()" class="form-control"
                               type="number"
                               placeholder="请输入需求人数" required/>
                    </div>
                </div>
                <div class="col-sm-6">
                    <label class="col-sm-4 control-label">电联人数：</label>
                    <div class="col-sm-8">
                        <input id="teleconnectionNum" name="teleconnectionNum" class="form-control" type="number"
                               placeholder="请输入电联人数"
                               required/>
                    </div>
                </div>
            </div>
        </div>

        <div class="form-group">
            <div class="col-sm-12">
                <div class="col-sm-6">
                    <label class="col-sm-4 control-label">邀约人数：</label>
                    <div class="col-sm-8">
                        <input id="invitationNum" name="invitationNum" class="form-control" type="number"
                               placeholder="请输入邀约人数人数" required/>
                    </div>
                </div>
                <div class="col-sm-6">
                    <label class="col-sm-4 control-label">面试人数：</label>
                    <div class="col-sm-8">
                        <input id="interviewNum" name="interviewNum" class="form-control" type="number"
                               placeholder="请输入面试人数人数" required/>
                    </div>
                </div>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-12">
                <div class="col-sm-6">
                    <label class="col-sm-4 control-label">约定上岗人数：</label>
                    <div class="col-sm-8">
                        <input id="appointmentNum" name="appointmentNum" class="form-control" placeholder="请输入约定上岗人数"
                               type="number" required/>
                    </div>
                </div>
                <div class="col-sm-6">
                    <label class="col-sm-4 control-label">实际到岗人数：</label>
                    <div class="col-sm-8">
                        <input id="actualArrivalNum" onblur="getRecruitReach()" name="actualArrivalNum"
                               class="form-control" placeholder="请输入实际到岗人数" type="number" required/>
                    </div>
                </div>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-12">
                <div class="col-sm-6">
                    <label class="col-sm-4 control-label">试用合格人数：</label>
                    <div class="col-sm-8">
                        <input id="trialQualifiedNum" name="trialQualifiedNum" class="form-control" type="number"
                               placeholder="请输入试用合格人数" required/>
                    </div>
                </div>
                <div class="col-sm-6">
                    <label class="col-sm-4 control-label">招聘达成率：</label>
                    <div class="col-sm-8">
                        <input id="recruitReach" name="recruitReach" class="form-control" type="text"
                               placeholder="到岗人数/需求人数*100" readonly="readonly "/>
                    </div>
                </div>
            </div>
        </div>
        <h4 class="form-header h4">面试者招聘渠道</h4>
        <div class="form-group">
            <div class="col-sm-12">
                <div class="col-sm-6">
                    <label class="col-sm-4 control-label">猎聘：</label>
                    <div class="col-sm-8">
                        <input id="lpNum" name="lpNum" class="form-control" type="number"
                               placeholder="请输入猎聘人数" required/>
                    </div>
                </div>
                <div class="col-sm-6">
                    <label class="col-sm-4 control-label">智联招聘：</label>
                    <div class="col-sm-8">
                        <input id="zlzpNum" name="zlzpNum" class="form-control" type="number"
                               placeholder="请输入智联招聘人数" required/>
                    </div>
                </div>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-12">
                <div class="col-sm-6">
                    <label class="col-sm-4 control-label">前程无忧：</label>
                    <div class="col-sm-8">
                        <input id="qcwyNum" name="qcwyNum" class="form-control" type="number"
                               placeholder="请输入前程无忧人数" required/>
                    </div>
                </div>
                <div class="col-sm-6">
                    <label class="col-sm-4 control-label">新安人才网：</label>
                    <div class="col-sm-8">
                        <input id="xarcwNum" name="xarcwNum" class="form-control" type="number" placeholder="请输入新安人才网人数"
                               required/>
                    </div>
                </div>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-12">
                <div class="col-sm-6">
                    <label class="col-sm-4 control-label">建筑英才网：</label>
                    <div class="col-sm-8">
                        <input id="jzycwNum" name="jzycwNum" class="form-control" type="number"
                               placeholder="请输入建筑英才网人数" required/>
                    </div>
                </div>
                <div class="col-sm-6">
                    <label class="col-sm-4 control-label">其他网站：</label>
                    <div class="col-sm-8">
                        <input id="qtNum" name="qtNum" class="form-control" type="number" placeholder="请输入其他网站人数" required/>
                    </div>
                </div>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-12">
                <div class="col-sm-6">
                    <label class="col-sm-4 control-label">猎头公司：</label>
                    <div class="col-sm-8">
                        <input id="ltgsNum" name="ltgsNum" class="form-control" type="number"
                               placeholder="请输入猎头公司人数" required/>
                    </div>
                </div>
                <div class="col-sm-6">
                    <label class="col-sm-4 control-label">内部推荐：</label>
                    <div class="col-sm-8">
                        <input id="nbtjNum" name="nbtjNum" class="form-control" type="number" placeholder="请输入内部推荐人数" required/>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>
<th:block th:include="include :: footer"/>
<th:block th:include="include :: datetimepicker-js"/>
<th:block th:include="include :: select2-js"/>

<script type="text/javascript">
    var prefix = ctx + 'recruitment';

    $(function () {


    })


    function submitHandler() {
        var compId = $("#compId").val();
        var years = $("#years").val();
        var months = $("#months").val();
        if(compId == ""){
            alert("请选择单位");
            return;
        }else if(years == ""){
            alert("请选择年份");
            return;
        }else if(months == ""){
            alert("请选择月份");
            return;
        }


        if ($.validate.form()) {
            var data = $("#form-recruitment-add").serializeArray();
            $.operate.save(prefix + "/add", data);
            //parent.sum();
        }
    }

    function getRecruitReach() {
        var demandNum = $("#demandNum").val();
        var actualArrivalNum = $("#actualArrivalNum").val();
        var recruitReach;
        if (demandNum != '' && actualArrivalNum != '') {
            if (demandNum == 0) {
                recruitReach = 0;
            } else {
                recruitReach = (actualArrivalNum / demandNum * 100).toFixed(2);
            }
            $("#recruitReach").val(recruitReach + "%");

        }
    }
</script>

</body>
</html>